<template>
  <el-dialog
    v-model="visable"
    title=""
    width="540"
    :style="{ height: height, width: width }"
    class="self_dialog"
    :show-close="false"
    append-to-body
    :class="{ isright: props.isright }"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="dialog-header" v-if="showHeader">
        <span class="title">{{ props.title }}</span>
        <el-icon class="icon" color="#fff" @click="cancel"><Close /></el-icon>
      </div>
    </template>
    <slot></slot>

    <template #footer>
      <div class="dialog-footer" v-if="showFooter">
        <slot name="footer">
          <el-button class="cancel-btn" @click="cancel">取消</el-button>
          <el-button class="confirm-btn" type="primary" @click="confirm">
            确定
          </el-button>
        </slot>
      </div>
    </template>
    <div class="outbtn">
      <slot name="outbtn"></slot>
    </div>
  </el-dialog>
</template>

<script setup>
import { watch } from "vue";

const props = defineProps({
  dialogVisable: Boolean,
  title: String,
  height: String,
  width: {
    type: String,
    default: "540px",
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  isright: {
    type: Boolean,
    default: false,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
});

let visable = ref(false);
watch(
  () => props.dialogVisable,
  (newVal) => {
    visable.value = newVal;
  }
);

const emit = defineEmits(["close", "confirm"]);

const cancel = () => {
  console.log("cancel");
  emit("close");
};

const confirm = () => {
  console.log("confirm");
  emit("confirm");
};
</script>

<style lang="scss">
.self_dialog {
  padding: 0;
  display: flex;
  flex-direction: column;
  &.isright{
    transform: translateX(100%);
  }
  .dialog-header {
    width: 100%;
    height: 50px;
    background: #2263bf;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
    .icon {
      font-size: 20px;
      cursor: pointer;
    }
  }
  .el-dialog__body {
    flex: 1;
    .center_content {
      width: 100%;
      text-align: center;
      .icon-img {
        width: 90px;
        height: 90px;
      }
      .text {
        margin-top: 20px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        letter-spacing: 1px;
      }
    }
  }
  .dialog-footer {
    width: 100%;
    height: 70px;
    background: #f3f6fd;
    text-align: center;
    line-height: 70px;
    .el-button {
      width: 100px;
      height: 36px;
      line-height: 36px;
      margin: 0 20px;
    }
    .cancel-btn {
      background: rgba(142, 191, 255, 0.72);
      border-radius: 3px;
      color: #2263bf;
      border: 0px;
    }
    .confirm-btn {
      background: #2263bf;
      border-radius: 3px;
    }
  }
  .outbtn {
    width: 100%;
    // width: 100%;
    height: 50px;
    position: absolute;
    bottom: -80px;
    left: 0;
    .panel-btn {
      width: 210px;
      margin: 0 auto;
      .btn {
        display: inline-block;
        margin: 0 auto;
        width: 100px;
        height: 36px;
        background: #ffffff;
        border-radius: 3px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        color: #4e97ff;
        &:nth-child(2) {
          width: 100px;
          height: 36px;
          background: #4e97ff;
          border-radius: 3px;
          color: #fff;
          line-height: 36px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>